<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>
            数量
        <input type="number" v-model.number="val" min="0" placeholder="0">
        </h2>
        <h2>单价：2</h2>
        <!-- <h1>{{val}}</h1> -->
        <h2>总价：{{double}}</h2>
        <li v-for="item in list2">{{item}}</li>
    </div>
</body>
<script src="vue.js"></script>
<script>
    const { createApp, ref, reactive, computed } = Vue;
    const app = createApp({
        setup(){
            let val=ref(0)
            let list =ref([{
                name:"🍉",
                price:2,
                num:5
            },{
                name:"🍇",
                price:3,
                num:3 
            }])
            let double =computed(function(){
                return val.value * 2
            })
            let list2=computed(()=>{
                return list.value.map(v=>{
                    v.total= v.price*v.num*all.value
                    return v
                })
            })

            return{
                val,double,list,list2
            }
        }
    }).mount("#app")
</script>
</html>